<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>position：relative</title>
  <link rel="stylesheet" type="text/css" href="starbuzz.css">
  <style>
    .div1,
    .p1 {
      background-color: lawngreen;
    }

    .div2 {
      background-color: lightcoral;

      /* 相对定位 */
      position: relative;
      left: 50px;
    }

    .div3,
    .p3 {
      background-color: blueviolet;
    }

    .p2 {
      background-color: lightcoral;

      /* 相对定位 */
      position: relative;
      left: 50px;
      top: 20px;
      /* top: 200px; */
    }
  </style>
</head>

<body>

  <div class="div1">This a div 1 </div>
  <div class="div2">This a div 2 </div>
  <div class="div3">This a div 3 </div>

  <div>
    <p class="p1">This is a P example 1</p>
    <p class="p2">This is a P example 2</p>
    <p class="p3">This is a P example 1</p>
  </div>
  </div>
</body>

</html>